<template>
	<view class="uni-flex uni-row area-title">
		<image class="img title-log" src="/static/image/mipmap-xhdpi/irri-area-icon.png" mode=""></image>
		<!-- <view class="text">{{name}}</view> -->
		<input class="text" type="text" v-model="name" @blur="onBlur" auto-blur />
		<view class="space"></view>
		<image class="img close" src="/static/image/mipmap-xhdpi/close.png" mode="" @click="close"></image>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			onBlur(){
				// this.$emit('change', this.name)
			}
		},
		computed:{
			name: {
				get(){
					return this.value
				},
				set(value){
					this.$emit('input', value)
				}
			}
		},
		props: {
			value:{
				type: String,
				required:true
			}
		}
	}
</script>

<style lang="scss" scoped>
.area-title{
	justify-content: space-between;
	align-items: space;
	.title-log{
		width: 87.05rpx;
		height: 85.88rpx;
	}
	.close{
		width: 71.76rpx;
		height: 71.76rpx;
	}
	.space{
		flex: 1;
	}
	.text{
		width: 447.05rpx;
		height: 84.7rpx;
		background: #54A89C;
		border-radius: 11.76rpx;
		margin-left: 12.94rpx;
		
		font-size: 47.05rpx;
		letter-spacing: 0.2em;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 84.7rpx;
	}
}
</style>